<!--添加班级-->
<template>
  <el-container>
    <el-header>
      <el-button plain type="primary" @click="dialogVisible = true">添加班级</el-button>
      <el-divider />
    </el-header>
    <el-main>
      <el-text class="mx-5" size="large">全部班级</el-text>

      <!-- 动态表格展示班级数据 -->
      <el-table v-loading="loading" :data="allClasses" style="width: 100%; margin-top: 20px;" border stripe>
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="id" label="班级ID" width="100" align="center" />
        <el-table-column prop="className" label="班级名称" width="200" align="center" />
        <el-table-column prop="teacherName" label="负责老师" width="200" align="center" />
        <el-table-column label="学生列表" align="left">
          <template #default="scope">
            <!-- 检查学生数组是否为空 -->
            <span v-if="scope.row.studentName && scope.row.studentName.length === 0" style="color: #999;">
              暂无学生
            </span>
            <div v-else>
              <!-- 使用 el-tag 组件来美化每个学生ID的显示 -->
              <el-tag
                  v-for="(studentName, _) in scope.row.studentName"
                  :key="studentName"
                  style="margin-right: 5px; margin-bottom: 5px;"
                  type="primary"
                  effect="plain"
              >
                {{ studentName }}
              </el-tag>
            </div>
          </template>
        </el-table-column>

        <!-- 操作列 (可选，用于演示如何添加操作按钮) -->
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
  <el-dialog
      v-model="dialogVisible"
      title="添加班级"
      width="350"
  >

      <el-form ref="form" label-width="80px">
        <el-form-item label="班级名称">
          <el-input v-model="className" />
        </el-form-item>
        <el-form-item label="责任教师">
          <el-select v-model="teacherName" placeholder="请选择班主任" style="width: 240px">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                style="width: 100%;"
            />
          </el-select>
        </el-form-item>
      </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="dialogVisibleCilck">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { useSysClassStore } from "../../stores/class.ts";
import { useSysUserStore } from "../../stores/user.ts";
import {selectIdAndData} from '../../api/user/user.ts'
import {save} from "../../api/class/class.ts";
import { computed, ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const loading = ref(true);
const sysClassStore = useSysClassStore();
const sysUserStore = useSysUserStore();
const dialogVisible = ref(false);

// 表单数据
const className = ref('');
const teacherName = ref();

// --- 修正点 1: 直接使用 computed 获取班级数据 ---
// 这样 allClasses 会自动响应 sysClassStore.getAllClasses 的变化
const allClasses = computed(() => sysClassStore.getAllClasses);

// 选择老师列表
interface SelectOption {
  value: number;
  label: string;
}
const options = ref<SelectOption[]>([])

// 获取所有老师列表并填充到 options
function loadTeacherOptions() {
  options.value = []; // 清空，防止重复
  sysUserStore.sysUser.forEach((user) => {
    if (user.router === 'teacher') {
      options.value.push({
        value: user.studengOrteacherId,
        label: user.name,
      })
    }
  })
}

// --- 修正点 2: onMounted 只负责初始化数据加载 ---
onMounted(async () => {
  loadTeacherOptions();
  // 假设你的 store 有一个 action 来获取所有班级数据
  // 如果 sysClassStore.getAllClasses 在 store 初始化时就已经加载了，则这里不需要额外调用
  // 如果需要手动调用，请取消下面这行的注释
  // await sysClassStore.fetchAllClasses();

  // 数据加载完成后，关闭 loading
  // 如果 store 内部处理了加载状态，可以移除此处的 loading 控制
  loading.value = false;
})

const dialogVisibleCilck = async () => {
  // 基本校验
  if (!className.value || !teacherName.value) {
    ElMessage.warning('请填写完整的班级信息');
    return;
  }

  try {
    // 根据选择的ID获取老师详细信息
    const res = await selectIdAndData(teacherName.value);
    const teacherData = res.data;

    if (!teacherData) {
      ElMessage.error('未找到所选教师信息，请重试');
      return;
    }

    const newClass = {
      teacherId: teacherData.studengOrteacherId,
      teacherName: teacherData.name,
      className: className.value,
      studentId: [],
      studentName: [],
    };

    // 调用API保存
    const saveRes = await save(newClass);

    if (saveRes.code == 200) {
      ElMessage.success('添加成功');
      dialogVisible.value = false;
      // --- 修正点 3: 添加成功后，重新获取数据并清空表单 ---
      // 假设你的 store 有这个 action
      // await sysClassStore.fetchAllClasses();
      // 清空表单
      className.value = '';
      teacherName.value = undefined;
    } else {
      ElMessage.error(saveRes.message || '添加失败');
    }
  } catch (error) {
    console.error('添加班级失败:', error);
    ElMessage.error('网络错误或服务器异常，添加失败');
  }
}

// --- 修正点 4: 删除 getdata 函数，因为它的功能已经被 computed 替代 ---

// 操作列的方法示例
const handleEdit = (row: any) => {
  console.log('编辑班级:', row);
  ElMessage.success(`正在编辑班级: ${row.className}`);
  // TODO: 实现编辑逻辑，例如打开一个包含当前班级信息的对话框
}

const handleDelete = (row: any) => {
  console.log('删除班级:', row);
  ElMessageBox.confirm(
      `确定要删除班级 "${row.className}" 吗?`,
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async () => {
    // TODO: 在这里调用 store 的删除 action
    // await sysClassStore.deleteClass(row.id);
    // ElMessage.success('删除成功');
    ElMessage({
      type: 'success',
      message: '删除成功（演示）',
    });
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除',
    });
  });
}
</script>

<style scoped lang="scss">
.el-header {
  // 为 header 添加一些内边距，使其看起来更舒适
  padding: 20px;
}
</style>
